<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
    <style>
        /* <!-- 顶部 --> */
        #mynav{
            margin-bottom: 0;
        }   
    #mynav a{
        color: #fff;
    }
    .itemes,#deng{
        margin-top: 10px;
    }
    #deng{
        margin-top: 25px;
    }
    .items{
        margin-top: 20px;
    }
    #sreach{
        background: #ccc;
    }
    /* 横幅 */
    .banner{
        width: 100%;
       
        background: url(image/bannerbg.png);
        background-size: 100% 1005
    }
    .bannerbox{
        padding:50px 20px;
        
    }
    
    .bannerrightcon{
        background:#fff;
        height: 368px;
    }
    .bannerrightcon li{
        padding:5px 0;
    }
    .bannerrightcon li a{
        color: #000;
    }
    .bannerrightf{
        padding:15px 0;
        border-top: 1px dotted #ccc;
        
    }
    /* 狮子王 */
    .kingbox{
        margin-top: 30px;
    }
    .king{
        border:1px solid #ccc;
        padding:5px;
    }
    .kinglast{
        padding:0 15px; 
    }
    .shou{
        border:1px solid #ccc;
        border-bottom:none;
        padding:5px;
    }
    .jineng{
        border-bottom:1px solid #ccc;
        padding:5px;
    }
    .ai{
        width: 100%;
        padding:20px 0;
    }
    .kinglast-p{
        border-top:1px solid #ccc;
        padding:10px 0 0;
    }
    /* 演唱会 */
    .yan{
        border-bottom:1px solid #ccc;
    }
    .yan .yans{
        border:1px solid #ccc;
        border-bottom:1px solid #fff;
    }
    .yancon p{
        margin-top: 5px;
    }
    .prive{
        font-size: 20px;
        color: #97F3F2;
    }
    @media screen and (max-width:767px) {
        /* 顶部 */
        #deng{

            position: absolute;
            top:0;
            left: 50%;
        }
        /* 横幅 */
        
        .bannerbox{
        padding:50px 20px;
        
    }
        .bannerrightcon{
        
        height: 300px;
    }
    }
    </style>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- 顶部 -->
<header class="navbar navbar-inverse" id="mynav">
    <div class="container">
        <div class="navbar-header">
            <a href=""><img src="image/logoMsg.png" alt=""></a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
             </button>
        </div>
        <div class="navbar-collapse collaspe navbar-left itemes" >
            <ul class="nav navbar-nav">
                <li><a href="">全国</a></li>
                <li><a href="">演出 <span class="caret"></span></a></li>
                <li><a href="">电影</a></li>
                <li><a href="">我的微票儿 <span class="label label-danger">new</span></a></li>
            </ul> 
        </div>
    <div class="nav navbar-nav navbar-right" id="deng">
        <ul class="list-inline">
                <li><a href="">登录</a></li>
                <li><a href="">注册</a></li>
        </ul>
    </div>
    <form action="#" class="navbar-form navbar-right visible-lg items">
            <div class="input-group">
               <input type="" class="form-control" placeholder="请输入要所搜的内容">
               <div class="input-group-btn">
                   <button class="btn btn-default" id="sreach">搜索</button>
               </div>
            </div>
        </form>       
    </div>    
</header>
<!-- 横幅 -->
<div class="banner">
    <div class="row bannerbox">
        <!-- 轮播图 -->
        <div class="col-md-8 col-sm-8 carousel slide" id="myCarousel" data-interval="1000" data-ride="carousel">
            <ul class="carousel-indicators">
                <li data-slide-to="0" data-target="#myCarousel"></li>
                <li data-slide-to="1" data-target="#myCarousel"></li>
                <li data-slide-to="2" data-target="#myCarousel" class="active"></li>
            </ul>
            <div class="carousel-inner">
                    <div class="item">
                            <img src="image/1.jpg" class="img-responsive" alt="">
                     </div>
                     <div class="item">
                    <img src="image/2.jpg" class="img-responsive" alt="">
                </div>
                     <div class="item active">
                    <img src="image/3.jpg" class="img-responsive" alt="">
                </div>   
            </div>
        </div>
        <div class="col-md-4 col-sm-4 hidden-xs">
            <div class="bannerrightcon col-md-10 col-md-offset-2">
                <h3>特惠看</h3>
                <ul class="list-unstyled ">
                    <li><a href=""><img src="image/4.jpg" class="img-responsive" alt=""></a></li>
                    <li><a href="">[苏州]2016迷笛电子音乐节(预售)</a></li>
                    <li><a href="">穿着花裤子喝着小酒通宵达旦</a></li>
                </ul>
                <ul class="list-unstyled bannerrightf">
                        <li><a href="">2016刘若英世界巡回演唱会</a></li>
                        <li><a href="">[上海]百老汇经典音乐剧--《狮子王》</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- 狮子王 -->
<div class="row kingbox">
    <div class="container">
        <div class="col-md-2 col-xs-6">
            <div class="king">
                <img src="image/5.jpg" class="img-responsive" alt="">
                <p>[上海]百老汇经典音乐剧《狮子王》</p>
            </div>
        </div>
        <div class="col-md-2 col-xs-6">
                <div class="king">
                        <img src="image/6.jpg" class="img-responsive" alt="">
                        <p>[北京]陈奕迅 ANOTHER EASON'S LIFE演唱会北京站</p>
                    </div>
            </div>
           <div class="col-md-2 col-xs-6">
            <div class="king">
                <img src="image/7.jpg" class="img-responsive" alt="">
                <p>[深圳]逃跑计划2016巡回演唱会深圳站</p>
            </div>
        </div> 
           <div class="col-md-2 col-xs-6">
            <div class="king">
                <img src="image/8.jpg" class="img-responsive" alt="">
                <p>[北京]BJCC北京漫控潮流博览会</p>
            </div>
        </div> 
           <div class="col-md-4 col-xs-6">
            <div class="king">
                
                    <div class="row kinglast">
                        <div class="col-md-2 col-xs-2 shou text-center"><a href="">首页</a></div>
                        <div class="col-md-10 col-xs-10 jineng"><a href="">技能课</a></div>
                    </div>
                   <img src="image/img2.jpg" class="img-responsive ai" alt="">
                   <p>[哈尔滨]梁静茹.你的名字是爱情演唱会</p>
                   <p class="kinglast-p">[太原]蔡依林2016PLAY世界巡回演唱会</p>
            </div>
        </div>     
 </div>
</div>
<!-- 寡语 -->
<div class="container kingbox">
    <img src="image/ad1.jpg" class="img-responsive" alt="">
</div>
<!-- 演唱会 -->
<div class="container kingbox">
    <div class="row">
       
        <div class="col-md-9">
            <ul class="list-inline yan">
                <li class="yans">演唱会</li>
                <li>演唱会</li>
                <li>演唱会</li>
                <li>演唱会</li>
                <li>演唱会</li>
                <li>演唱会</li>
            </ul>
            <div class="row yancon">
                <div class="col-md-3">
                    <div class="king">
                        <img src="image/9.jpg" class="img-responsive" alt="">
                        <p>[苏州]2016迷笛电子音乐节</p>
                        <p><span class="prive">180</span>元起</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="king">
                        <img src="image/10.jpg" class="img-responsive" alt="">
                        <p>[深圳]逃跑计划2016巡回演唱会深圳站</p>
                        <p><span class="prive">180</span>元起</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="king">
                        <img src="image/11.jpg" class="img-responsive" alt="">
                        <p>[北京]陈奕迅 ANOTHER EASON'S LIFE演唱会北京站</p>
                        <p><span class="prive">380</span>元起</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="king">
                        <img src="image/12.jpg" class="img-responsive" alt="">
                        <p>[青岛]周杰伦2016世界巡回演唱会青岛站(即将开售)
                            </p>
                        <p><span class="prive">380</span>元起</p>
                    </div>
                </div>    
            </div>
        </div>
    </div>
        <div class="col-md-3">

            </div>
    </div>
</div>




















    <script src="js/jquery-1.10.2.min.js"></script>   
     <script src="js/bootstrap.min.js"></script>
</body>
</html>